<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Skeleton
    </ui:define>

    <ui:define name="description">
        Skeleton is a placeholder to display instead of the actual content.
    </ui:define>

    <ui:param name="documentationLink" value="/components/skeleton"/>

    <ui:define name="implementation">
        <style>
            .custom-skeleton {
                border: 1px solid var(--surface-d);
                border-radius: 4px;
            }
            .custom-skeleton>ul {
                list-style: none;
            }
        </style>

        <div class="card">
            <div class="grid formgrid">
                <div class="field col-12 md:col-6">
                    <h5>Rectangle</h5>
                    <p:skeleton class="mb-2"/>
                    <p:skeleton width="10rem" class="mb-2"/>
                    <p:skeleton width="5rem" class="mb-2"/>
                    <p:skeleton height="2rem" class="mb-2"/>
                    <p:skeleton width="10rem" height="4rem"/>
                </div>
                <div class="field col-12 md:col-6">
                    <h5>Rounded</h5>
                    <p:skeleton class="mb-2" borderRadius="16px"/>
                    <p:skeleton width="10rem" class="mb-2" borderRadius="16px"/>
                    <p:skeleton width="5rem" borderRadius="16px" class="mb-2"/>
                    <p:skeleton height="2rem" class="mb-2" borderRadius="16px"/>
                    <p:skeleton width="10rem" height="4rem" borderRadius="16px"/>
                </div>
                <div class="field col-12 md:col-6">
                    <h5 class="mt-3">Square</h5>
                    <div class="flex align-items-end">
                        <p:skeleton size="2rem" class="mr-2"/>
                        <p:skeleton size="3rem" class="mr-2"/>
                        <p:skeleton size="4rem" class="mr-2"/>
                        <p:skeleton size="5rem"/>
                    </div>
                </div>
                <div class="field col-12 md:col-6">
                    <h5 class="mt-3">Circle</h5>
                    <div class="flex align-items-end">
                        <p:skeleton shape="circle" size="2rem" class="mr-2"/>
                        <p:skeleton shape="circle" size="3rem" class="mr-2"/>
                        <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                        <p:skeleton shape="circle" size="5rem"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="grid formgrid">
                <div class="field col-12 md:col-6 md:pr-6 pr-0">
                    <h5>Card</h5>
                    <div class="custom-skeleton p-4">
                        <div class="flex mb-3">
                            <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                            <div>
                                <p:skeleton width="10rem" class="mb-2"/>
                                <p:skeleton width="5rem" class="mb-2"/>
                                <p:skeleton height=".5rem"/>
                            </div>
                        </div>
                        <p:skeleton width="100%" height="150px"/>
                        <div class="flex justify-content-between mt-3">
                            <p:skeleton width="4rem" height="2rem"/>
                            <p:skeleton width="4rem" height="2rem"/>
                        </div>
                    </div>
                </div>

                <div class="field col-12 md:col-6">
                    <h5>List</h5>
                    <div class="custom-skeleton p-4">
                        <ul class="m-0 p-0">
                            <li class="mb-3">
                                <div class="flex">
                                    <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                                    <div style="flex: 1">
                                        <p:skeleton width="100%" class="mb-2"/>
                                        <p:skeleton width="75%"/>
                                    </div>
                                </div>
                            </li>
                            <li class="mb-3">
                                <div class="flex">
                                    <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                                    <div style="flex: 1">
                                        <p:skeleton width="100%" class="mb-2"/>
                                        <p:skeleton width="75%"/>
                                    </div>
                                </div>
                            </li>
                            <li class="mb-3">
                                <div class="flex">
                                    <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                                    <div style="flex: 1">
                                        <p:skeleton width="100%" class="mb-2"/>
                                        <p:skeleton width="75%"/>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="flex">
                                    <p:skeleton shape="circle" size="4rem" class="mr-2"/>
                                    <div style="flex: 1">
                                        <p:skeleton width="100%" class="mb-2"/>
                                        <p:skeleton width="75%"/>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <h5>DataTable</h5>
                <p:dataTable var="product" value="#{skeletonView.products}">
                    <p:column headerText="Code">
                        <p:skeleton/>
                    </p:column>
                    <p:column headerText="Name">
                        <p:skeleton/>
                    </p:column>
                    <p:column headerText="Category">
                        <p:skeleton/>
                    </p:column>
                    <p:column headerText="Quantity">
                        <p:skeleton/>
                    </p:column>
                </p:dataTable>
            </div>
        </div>

        <div class="card" style="min-height: 150px">
            <p:outputPanel deferred="true" deferredMode="visible">
                <p:ajax event="load" listener="#{outputPanelView.loadData}"/>
                <f:facet name="loading">
                    <p:skeleton width="200px" height="21px" class="mb-4"/>
                    <p:skeleton width="100%" height="42px"/>
                </f:facet>
                <h5>#{outputPanelView.data.title}</h5>
                <p>#{outputPanelView.data.body}</p>
            </p:outputPanel>
        </div>
    </ui:define>

</ui:composition>
